<template>
  <div>
    <km-header></km-header>
    <div class="content clearfix">
      <!--Right Box-->
      <div class="right-box">
        <!--MAIN LINKS-->
        <ul class="main-link-list">
          <li>
            <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=12255">
              SYNNEX Central Introduction
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=6454">
              BPO New Hire Training
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=11484">
              ITO Internal Training
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=11485">
              ITO External Training
              <i class="fa fa-angle-right" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
        <!--/MAIN LINKS-->

        <!--RIGHT LINK BLOCK-->
        <div class="right-link-block">
          <h3 class="title">Quick Links</h3>
          <ul class="list">
            <li>
              <a target="_blank" href="https://confluence.synnex.com">Confluence</a>
            </li>
            <li>
              <a target="_blank"
                 href="http://cnintranet.synnex.org/SNXCommunity/wp-content/uploads/2011/01/policy/SCM(BJ).doc">EBE(BJ)-SCM管理办法</a>
            </li>
            <li>
              <a target="_blank"
                 href="http://cnintranet.synnex.org/SNXCommunity/wp-content/uploads/2011/01/policy/SCM(CD).doc">EBE
                (CD)-SCM管理办法</a>
            </li>
            <li>
              <a target="_blank" href="#">EBT+EBE+OSCM</a>
            </li>
            <li>
              <a target="_blank" href="http://cdc-v-ittools.synnex.org:8050/ccem">Glossary of Terms</a>
            </li>
            <li>
              <a target="_blank" href="https://hr.synnex.org/">HR System</a>
            </li>
            <li>
              <a target="_blank"
                 href="http://cnintranet.synnex.org/SNXCommunity/corporate-policies-2/">Policy</a>
            </li>
            <li>
              <a target="_blank" href="https://192.168.80.143/sugarcrm">SIS CRM</a>
            </li>
            <li>
              <a target="_blank" href="http://cnintranet.synnex.org/SNXCommunity/synnex-logos/">SYNNEX
                Logos</a>
            </li>
            <li>
              <a target="_blank" href="https://bjcmail.synnex.com">WebMail(BJ)</a>
            </li>
            <li>
              <a target="_blank" href="https://cdcmail.synnex.com">WebMail(CD)</a>
            </li>
            <li>
              <a target="_blank" href="https://frmwebmail.synnex.com/exchange/">WebMail(Fremont)</a>
            </li>
            <li>
              <a target="_blank" href="http://cdc-v-ittools.synnex.org:8090/bmsh">图书管理系统</a>
            </li>
            <li>
              <a target="_blank" href="http://cnservicedesk.synnex.org:8088/">采购系统（北京）</a>
            </li>
            <li>
              <a target="_blank" href="http://192.168.84.226:8080/">采购系统（成都）</a>
            </li>
          </ul>
        </div>

        <div class="right-link-block">
          <h3 class="title">ITO Links</h3>
          <ul class="list">
            <li>
              <a target="_blank" href="http://gui.synnex.org:8091/app/">GUI Standard 2.0</a>
            </li>
            <li>
              <a target="_blank"
                 href="http://cdc-v-ittools.synnex.org:8090/rulecheck/ruleSite/pages/index.html">ITO 流程与规范</a>
            </li>
            <li>
              <a target="_blank" href="http://doc.synnex.org:8088/display/IS/IT+STANDARD+Home">SYNNEX
                Standard</a>
            </li>
            <li>
              <a target="_blank"
                 href="https://jira.synnex.com/secure/TempoUserBoard!timesheet.jspa?classicView=true">Time
                Sheet in JIRA</a>
            </li>
            <li>
              <a target="_blank" href="http://gui.synnex.org/">UI Library</a>
            </li>
          </ul>
        </div>

        <div class="right-link-block">
          <h3 class="title">BPO Links</h3>
          <ul class="list">
            <li>
              <a target="_blank" href="https://mycis-uk.synnex.org/cis-mainmenu/login2.do">HYVE UK</a>
            </li>
            <li>
              <a target="_blank" href="https://mycis-us.hyvesolutions.org/cis-mainmenu/login2.do">HYVE US</a>
            </li>
            <li>
              <a target="_blank" href="https://cnintranet.synnex.org/SNXCommunity/mycis-links/">MyCIS</a>
            </li>
            <li>
              <a target="_blank" href="https://mycis.synnex.org/cis-mainmenu/login2.do">SYNNEX Central</a>
            </li>
          </ul>
        </div>

        <div class="right-link-block">
          <h3 class="title">SIS Links</h3>
          <ul class="list">
            <li>
              <a target="_blank" href="http://192.168.80.18:7101/cis-sp/login.do">SIS MyCIS</a>
            </li>
          </ul>
        </div>

        <div class="right-link-block">
          <h3 class="title">Dept Sites</h3>
          <ul class="list">
            <li>
              <a target="_blank" href="./training.html">Training Center</a>
            </li>
            <li>
              <a target="_blank" href="http://kmcd.synnex.org/skm/index.php">Outstanding</a>
            </li>
            <li>
              <a target="_blank" href="http://cnintranet.synnex.org/SNXCommunity/guitribe/">GUI Tribe</a>
            </li>
            <li>
              <a target="_blank" href="http://cnintranet.synnex.org/SNXCommunity/stc/">STC技术应用交流大会</a>
            </li>
            <li>
              <a target="_blank" href="http://cnintranet.synnex.org/SNXCommunity/happy/">新动小组暨工会</a>
            </li>
            <li>
              <a target="_blank" href="http://cnintranet.synnex.org/SNXCommunity/share/">读书会</a>
            </li>
          </ul>
        </div>
        <!--/RIGHT LINK BLOCK-->

      </div>
      <!--/Right Box-->

      <!--Main-->
      <div class="main-box">
        <!--myCarousel-->
        <div id="myCarousel" class="carousel slide">
          <!-- 轮播（Carousel）指标 -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>
          <!-- 轮播（Carousel）项目 -->
          <div class="carousel-inner">
            <div class="item active" style="background-color: #ffffff;">
              <a target="_blank" href="http://synnex.com/roberthuangscholarship/">
                <img src="../../assets/images/home/banner/homebanner2.jpg" alt="First slide">
              </a>
            </div>
            <div class="item" style="background-color: #0b1134;">
              <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=learn&a=open_course&sort=5">
                <img src="../../assets/images/home/banner/homebanner3.jpg" alt="First slide">
              </a>
            </div>
            <div class="item" :style="{background: `url(${require('../../assets/images/home/banner/homebanner4_bg.jpg')}) repeat-x`}">
              <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=utilities&a=printing">
                <img src="../../assets/images/home/banner/homebanner4.jpg" alt="First slide">
              </a>
            </div>
          </div>
          <!-- 轮播（Carousel）导航 -->
          <a class="carousel-control left" href="#myCarousel"
             data-slide="prev">
            <i></i>
          </a>
          <a class="carousel-control right" href="#myCarousel"
             data-slide="next">
            <i></i>
          </a>
        </div>
        <!--myCarousel-->

        <div class="line-row clearfix">
          <div class="line-col1">
            <h2 class="b-title">
              新闻
              <span>News</span>
              <a target="_blank"
                 href="https://cnintranet.synnex.org/SNXCommunity/blog/category/%E6%96%B0%E9%97%BB/">More</a>
            </h2>

            <ul class="news-list">
              <li>
                <h3>
                  <a target="_blank"
                     href="https://cnintranet.synnex.org/SNXCommunity/blog/2017/02/09/%E6%88%90%E9%83%BD%E5%8C%97%E4%BA%ACopen%E5%B2%97%E4%BD%8D%E5%86%85%E9%83%A8%E6%8E%A8%E8%8D%90/">成都北京open岗位内部推荐</a>
                </h3>
                <p>2/9/2017 -Admin</p>
              </li>
              <li>
                <h3>
                  <a target="_blank"
                     href="https://cnintranet.synnex.org/SNXCommunity/blog/2016/12/13/2017-%e6%97%a5%e5%8e%86%e4%b8%8b%e8%bd%bd/">2017日历下载</a>
                </h3>
                <p>11/3/2017 -Admin</p>
                <div class="download">
                  <a target="_blank"
                     href="http://cnintranet.synnex.org/SNXCommunity/wp-content/uploads/2016/12/calendar-2017.pdf">Download
                    2017 Canlendar vector version for Printing</a>
                </div>
                <div class="download">
                  <a target="_blank"
                     href="http://cnintranet.synnex.org/SNXCommunity/wp-content/uploads/2016/12/Calendar-2017.jpg">Download
                    2017 Canlendar vector version for Printing</a>
                </div>
              </li>
              <li>
                <h3>
                  <a target="_blank"
                     href="https://cnintranet.synnex.org/SNXCommunity/blog/2016/10/10/%e3%80%8a%e5%95%86%e4%b8%9a%e9%81%93%e5%be%b7%e8%a1%8c%e4%b8%ba%e8%a7%84%e8%8c%83%e3%80%8b%e5%92%8c%e3%80%8a%e5%88%a9%e5%ae%b3%e5%85%b3%e7%b3%bb%e5%a3%b0%e6%98%8e%e5%87%bd%e3%80%8b%e5%8d%b3%e5%b0%86/">《商业道德行为规范》和《利害关系声明函》即将签署</a>
                </h3>
                <p>11/3/2017 -Admin</p>
              </li>
            </ul>

          </div>
          <div class="line-col2 clearfix">
            <open-course></open-course>
          </div>
        </div>

        <div class="line-row clearfix">
          <div class="line-col1">
            <h2 class="b-title">
              最热问题
              <span>Top Questions</span>
            </h2>

            <ul class="top-question">
              <li>
                <span>ASK</span>
                <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=sask&a=detail&id=40599">FYI.请问大家这是的缩写？</a>
              </li>
              <li>
                <span>ASK</span>
                <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=sask&a=detail&id=44177">最喜欢的一本书？</a>
              </li>
              <li>
                <span>ASK</span>
                <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=sask&a=detail&id=42230">一起去色达玩耍
                  然后报旅游经费呗</a>
              </li>
              <li>
                <span>ASK</span>
                <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=sask&a=detail&id=42079">公司从哪些方面考察实习生</a>
              </li>
              <li>
                <span>ASK</span>
                <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=sask&a=detail&id=40687">如何激发对工作的热情和积极性</a>
              </li>
              <li>
                <span>ASK</span>
                <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=sask&a=detail&id=42506">2015公积金新政策</a>
              </li>
              <li>
                <span>ASK</span>
                <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=sask&a=detail&id=40949">怎样同时打开两个excel表格?</a>
              </li>
            </ul>

          </div>
          <div class="line-col2">
            <hot-knowledge></hot-knowledge>
          </div>
        </div>

        <div class="line-row clearfix">
          <div class="line-col3">
            <h2 class="b-title">
              杰出员工
              <span>Outstanding</span>
              <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=in&domain=2087">More</a>
            </h2>

            <div class="outstanding-box">
              <div class="overflow">
                <div class="outstanding-list current">
                  <ul>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14458">
                        <img src="../../assets/images/home/headSlice/BellaXue.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14458">
                          Bella Xue
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=in&page=15252">
                        <img src="../../assets/images/home/headSlice/JanisJin.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=in&page=15252">
                          Janis Jin
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=15035">
                        <img src="../../assets/images/home/headSlice/KevinTian.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=15035">
                          Kevin Tian
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14893">
                        <img src="../../assets/images/home/headSlice/JoannaNiu.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14893">
                          Joanna Niu
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=15034">
                        <img src="../../assets/images/home/headSlice/AimeeGuo.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=15034">
                          Aimee Guo
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=in&page=15204">
                        <img src="../../assets/images/home/headSlice/SommerXia.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=in&page=15204">
                          Sommer Xia
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=in&page=15201">
                        <img src="../../assets/images/home/headSlice/MaggieTang.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=in&page=15201">
                          Maggie Tang
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14645">
                        <img src="../../assets/images/home/headSlice/ElveWang.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14645">
                          Elve Wang
                        </a>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="outstanding-list">
                  <ul>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14633">
                        <img src="../../assets/images/home/headSlice/JasonLiu.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14633">
                          Jason Liu
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14706">
                        <img src="../../assets/images/home/headSlice/SevenZhang.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14706">
                          Seven Zhang
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14391">
                        <img src="../../assets/images/home/headSlice/SylviaSong.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14391">
                          Sylvia Song
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14479">
                        <img src="../../assets/images/home/headSlice/MeganLuo.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14479">
                          Megan Luo
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14480">
                        <img src="../../assets/images/home/headSlice/IrisJing.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14480">
                          Iris Jing
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14523">
                        <img src="../../assets/images/home/headSlice/PhoenixChen.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14523">
                          Phoenix Chen
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14560">
                        <img src="../../assets/images/home/headSlice/IvyYang.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14560">
                          Ivy Yang
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14145">
                        <img src="../../assets/images/home/headSlice/MathildaMiao.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14145">
                          Mathilda Miao
                        </a>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="outstanding-list">
                  <ul>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14151">
                        <img src="../../assets/images/home/headSlice/AlanZhao.png" alt="">
                      </a>
                      <div>
                        <a target="_blank"
                           href="http://km.synnex.org/skm/index.php?c=in&page=14151">
                          Alan Zhao
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=in&page=15288">
                        <img src="../../assets/images/home/headSlice/EthanWang.png" alt="">
                      </a>
                      <div>
                        <a target="_blank"
                           href="http://kmcd.synnex.org/skm/index.php?c=in&page=15288">
                          Ethan Wang
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14459">
                        <img src="../../assets/images/home/headSlice/SarahLi.png" alt="">
                      </a>
                      <div>
                        <a target="_blank"
                           href="http://km.synnex.org/skm/index.php?c=in&page=14459">
                          Sarah Li
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://kmcd.synnex.org/skm/index.php?c=in&page=15481">
                        <img src="../../assets/images/home/headSlice/YorkLiu.png" alt="">
                      </a>
                      <div>
                        <a target="_blank"
                           href="http://kmcd.synnex.org/skm/index.php?c=in&page=15481">
                          York Liu
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14596">
                        <img src="../../assets/images/home/headSlice/JefferyLi.png" alt="">
                      </a>
                      <div>
                        <a target="_blank"
                           href="http://km.synnex.org/skm/index.php?c=in&page=14596">
                          Jeffery Li
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14522">
                        <img src="../../assets/images/home/headSlice/YaleZhang.png" alt="">
                      </a>
                      <div>
                        <a target="_blank"
                           href="http://km.synnex.org/skm/index.php?c=in&page=14522">
                          Yale Zhang
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=14517">
                        <img src="../../assets/images/home/headSlice/MattieLi.png" alt="">
                      </a>
                      <div>
                        <a target="_blank"
                           href="http://km.synnex.org/skm/index.php?c=in&page=14517">
                          Mattie Li
                        </a>
                      </div>
                    </li>
                    <li>
                      <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=15037">
                        <img src="../../assets/images/home/headSlice/BellePeng.png" alt="">
                      </a>
                      <div>
                        <a target="_blank" href="http://km.synnex.org/skm/index.php?c=in&page=15037">
                          Belle Peng
                        </a>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <a href="javascript:void(0)" class="dir prev" style="display: none">Prev</a>
              <a href="javascript:void(0)" class="dir next">Next</a>
            </div>

          </div>
        </div>

      </div>
      <!--/Main-->
    </div>
    <km-footer></km-footer>
  </div>
</template>

<script>
  import localStore from 'store'
  import kmHeader from './header'
  import kmFooter from './footer'
  import hotKnowledge from './hotKnowledge'
  import openCourse from './openCourse'
  import { getHomeInfo } from './types'
  import { post } from '@/utils/request'

  export default {
    name: 'km-home',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: { kmHeader, kmFooter, hotKnowledge, openCourse },
    created () {
      this.$store.dispatch(getHomeInfo)
      // 模拟Login
      post('http://192.168.80.125/api/auth', {
        id: 1155644043
      }).then(response => {
        return response.json()
      }).then(({ data }) => {
        console.log('auth ', data)
        localStore.set('auth', data)
      })
    },
    mounted: () => {
      /*eslint-disable */
      $('.carousel').carousel();
      setTimeout(() => {
        var $outstadingBox = $('.outstanding-box'),
          $overflow = $outstadingBox.find('.overflow'),
          $prev = $outstadingBox.find('.prev'),
          $next = $outstadingBox.find('.next'),
          $list = $outstadingBox.find('.outstanding-list');
          var size = $list.length - 1;

        var switchView = function (type) {
          var $current = $outstadingBox.find('.current');
          var index = $list.index($current);
          index = index + type;
          if (index < 0) {
            $prev.fadeOut();
            return false;
          } else if (index > size) {
            $next.fadeOut();
            return false;
          }
          if (index == size) {
            $next.fadeOut();
          } else if (index == 0) {
            $prev.fadeOut();
          } else {
            $prev.fadeIn();
            $next.fadeIn();
          }
          console.info(index, size)


          $list.removeClass('current').eq(index).addClass('current');
          $overflow.css({
            'left': '-' + index + '00%'
          });
        };
        $prev.click(function () {
          switchView(-1);
        });
        $next.click(function () {
          switchView(1);
        });
      })
      /*eslint-disable */
    },
  };
</script>

<style lang="scss" src="../../assets/scss/km_home.scss"></style>
<style src="../../assets/css/font-awesome.css"></style>
<style lang="scss">
  #myCarousel{
  }
</style>

